<template>
  <view class="_icon-wrapper">
      <text v-if="type === 'text'" class="_txt">{{ title }}</text>
      <image v-if="type === 'image'" class="_icon" :src="icon" />
  </view>
</template>
<script setup>
  defineProps({
    title: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: "text"
    }
  });
</script>

<style lang="scss" scoped>
._icon-wrapper {
  width: 42upx;
  height: 42upx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #461e50;
  border-radius: 21upx;
  ._txt {
    color: #F9F9F9;
    font-family: Arial Black;
    font-size: 20upx;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
  }
  ._icon {
    width: 24upx;
    height: 24upx;
  }
}
</style>